<template>
    <div class="app-container"> 

      <el-container>
        <el-header>
          <el-row :gutter="20">

            <el-col :span="4">
              <div>
                <el-button type="primary"  @click="AddVideo()">新增视频</el-button>
              </div>
            </el-col>

            <el-col :span="4">
              <div>
                <el-input
                  placeholder="视频名称"
                  v-model="SelectVideoVo.videoname"
                  clearable>
                </el-input>
              </div>
            </el-col>
            <el-col :span="3">
              <div>
                <el-select v-model="SelectVideoVo.upid" filterable placeholder="上传者">
                  <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </div>
            </el-col>
            <el-col :span="8">
                <el-date-picker
                    v-model="createTimes"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    style="margin-right: 10px;width: 100%;"
                />
            </el-col>
            <el-col :span="5">
              <div>
                <el-button type="primary" plain @click="fetchData()">查询</el-button>
                <el-button type="warning" plain @click="ClearSelect()">清空所有条件</el-button>
              </div>
            </el-col>
          </el-row>
        </el-header>


        <el-main>
            <template>
                <el-table
                :data="VideoList"
                border
                style="width: 100%">
                <el-table-column
                prop="videoname"
                label="视频名称">
                </el-table-column>
                <el-table-column
                prop="name"
                label="上传者">
                </el-table-column>
                <el-table-column
                prop="createTime"
                label="上传时间">
                </el-table-column>
                <el-table-column
                prop="description"
                label="描述">
                </el-table-column>
                <el-table-column label="操作"  align="center" fixed="right" width="250">
                    <template slot-scope="scope">
                    <el-button type="primary" icon="el-icon-edit" size="mini" @click="edit(scope.row.id)" title="修改"/>
                    <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeViedoById(scope.row.id)" title="删除" />
                    </template>
                </el-table-column>


                </el-table>
            </template>
        </el-main>
      </el-container>

      <!--编辑表单-->
      <el-dialog title="编辑表单" :visible.sync="dialogVisible">
        <el-form :model="VideoData">
          <el-form-item label="上传视频">
            <el-upload
                  :on-success="handleVodUploadSuccess"
                  :before-remove="beforeVodRemove"
                  :on-exceed="handleUploadExceed"
                  :file-list="fileList"
                  :headers="config"
                  action='/dev-api/admin/course/video/uploadVideo'
                  :limit="1"
                  class="upload-demo">
            <el-button size="small" type="primary">选择文件</el-button>
            <div slot="tip" class="el-upload__tip">只能上传MP4文件,且不超过100MB,文件名中不要出现中文大写字符</div>
            
          </el-upload>
          <el-link :href="VideoData.url" target="primary" :underline="false"><i class="el-icon-view el-icon--right"></i>点击查看视频</el-link>
        </el-form-item>
        <el-form-item label="视频名称"   >
          <el-input v-model="VideoData.videoname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="上传者"   >
          <el-select v-model="VideoData.upid" filterable :placeholder="VideoData.name">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="课程描述">
          <el-input v-model="VideoData.description" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="doCommit()">确 定</el-button>
      </div>
      </el-dialog>
      
    </div>
</template>

<script>
import api from '@/api/LearnSpace/Video'
import capi from '@/api/LearnSpace/Course'
import { mapGetters } from 'vuex'
export default {
  computed: {
      config() {
        return { token: this.token};
      },
      ...mapGetters([
      'token',
    ])
  },
  // 定义数据
  data() {
    return {
        VideoList:[{

        }],
        options: [{ //教师条件选择器
            id: '',
            name: ''
        }],
        SelectVideoVo:{ //条件选择器
            id:'',
            courseId:'',
            videoname:'',
            upid:'',
            createTimeBegin:'',
            createTimeEnd:'',
        },
        createTimes:[], //时间选择器
        dialogVisible : false, //控制可视化
        VideoData:{   //视频信息，用于传输给后端
          id:'',
          courseid:'',
          videoname:'',
          upid:'',
          description:'',
          url:'',
          name:''
        }, 
        //以下为上传视频相关
        fileList: [],//上传文件列表

    }

  },
  //当页面加载时获取数据
  created() {
    this.fetchData()
  },

  methods: {
    AddVideo(){ //新增视频接口
      this.VideoData={}
      this.dialogVisible=true
      
    },
    fetchData(){
        this.SelectVideoVo.courseId = this.$route.query.id
        if(this.createTimes && this.createTimes.length ==2) {
        this.SelectVideoVo.createTimeBegin = this.createTimes[0]
        this.SelectVideoVo.createTimeEnd = this.createTimes[1]
        }
        api.getPageList(this.SelectVideoVo).then(resp => {
            this.VideoList = resp.data
            capi.SelectNameAndId().then(response=>{
                this.options=response.data
            })
        })
    },
    //清空当前已经选择的所有条件
    ClearSelect(){
        this.SelectVideoVo={}
        this.options=[]
        this.createTimes=[]
        this.fetchData()
    },
    //修改
        //数据回显
    edit(id){
      this.VideoData={}
      this.dialogVisible=true
      api.SelectByID(id).then(resp=>{
        this.VideoData = resp.data
      })
    },

    doCommit(){
      if(!this.VideoData.id){
        this.doAddVideo()
      }else{
        this.EditVideo()
      }
    },

    EditVideo(){
      api.Updata(this.VideoData).then(resp=>{
        this.$message({
          type: 'success',
          message: '修改成功!!'
        });
        this.dialogVisible = false;
        this.fetchData()
        this.VideoData={}
        this.options=[]
      })
    },

    doAddVideo(){
      this.VideoData.courseid = this.$route.query.id
      api.Add(this.VideoData).then(resp=>{
        this.$message({
          type: 'success',
          message: '添加成功!!'
        });
        this.dialogVisible = false;
        this.fetchData()
        this.VideoData={}
        this.options=[]
      })
    },

    //传入id删除
    removeViedoById(id){
      this.$confirm('此操作将永久删除该课程, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          api.DeleteVideo(id).then(resp => {
            this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.fetchData()
        })

        })
    },

  //以下为上传视频相关js
  //成功回调
  handleVodUploadSuccess(response, file) {
    this.VideoData.url = response.data.VideoUrl

  },
  //试图上传多于一个视频
  handleUploadExceed(files, fileList) {
    this.$message.warning('想要重新上传视频，请先删除已上传的视频')
  }, 

  beforeVodRemove(file, fileList) {
    return this.$confirm(`确定移除 ${file.name}？`)
  },

  }
}
</script>
<style>

</style>